<template>
	<div class="box" :class="{ moveTo: flag }">测试</div>
	<button @click="add">操作</button>
</template>
<script>
import { gsap } from "gsap";
export default {
	data() {
		return {
			flag: false
		}
	},
	methods: {
		add() {
			let i;
			setInterval(() => {
				console.log(++i);
			}, 3000);
			console.log(`helloworld`);
			gsap.to('.box', {
				duration: 1,
				x: 100,
				y: 100
			})
			console.log(`helloworld`);
		}
	},
}
</script>
<style lang="scss">
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
	background: #fff;

	&.moveTo {
		animation: moveTo 2s linear infinite;
	}
}

@keyframes moveTo {
	0% {
		transform: scale(0);
	}

	50% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}
</style>